<template>
    <!-- 永续合约，交割合约公共头部 -->
    <div>
        <div class="contract-header ">
            <div class="pl-30 pr-30">
                <div class="flex justify-between pt-45">
                    <div class="flex">
                        <!-- 没有切换模式的 -->
                        <template v-if="!isChange">
                            <img :src="require(`@/assets/theme/${THEME}/image/black-convert.png`)" alt="convert-img"
                                class="w-35 h-35" @click="onSidebar" />
                        </template>
                        <!-- 在切换模式下 -->
                        <template v-if="isChange">
                            <template v-if="isNight">
                                <img src="@/assets/image/icon_back_1.png" class="w-40 h-40 back mr-50" alt=""
                                    @click="kineType ? $router.push(`/trade/${symbol}`) : $router.push(`/perpetualContract/${symbol}`)">
                                <img src="./white-convert.png" alt="convert-img" class="w-35 h-35" @click="onSidebar" />
                            </template>
                            <template v-else>
                                <img src="@/assets/image/icon_back.png" class="w-40 h-40 back mr-50" alt=""
                                    @click="kineType ? $router.push(`/trade/${symbol}`) : $router.push(`/perpetualContract/${symbol}`)">
                                <img src="./black-convert.png" alt="convert-img" class="w-35 h-35" @click="onSidebar" />
                            </template>
                        </template>
                        <div class="flex flex-col pl-21" @click="onSidebar">
                            <template v-if="!isChange">
                                <div class="font-35 textColor">{{ symbol && symbol.toUpperCase() || '--' }}/USDT</div>
                            </template>
                            <template v-if="isChange">
                                <div class="font-35" :class="isNight ? 'text-white' : 'text-black'">{{ symbol &&
                                    symbol.toUpperCase() || '--' }}/USDT</div>
                            </template>
                        </div>
                        <div v-if="range" class="pl-30" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{
                            range > 0 ? '+' : '' }}{{ range || '--' }}%</div>
                    </div>
                    <div class="flex items-center" v-if="islevel">
                        <img v-if="isNight" @click="changeBg" class="w-32 h-35" src="../../assets/image/public/moon.png"
                            alt="" />
                        <img v-else @click="changeBg" class="w-32 h-35" src="../../assets/image/public/sun.png" alt="" />
                        <img :src="require(`@/assets/image/icon-star${collected === '1' ? '_active' : ''}.png`)"
                            class="w-30 h-30 mr-10 ml-20" @click="onCollect" />
                        <!--                <img src="@/assets/image/public/record.png" class="w-38 h-38 ml-20" @click="$router.push('/quotes?active=3')"/>-->
                    </div>
                    <img v-if="isTrade" src="@/assets/image/kline.png" class="w-44 h-44 right" alt=""
                        @click="$router.push(`/trendDetails/${symbol}?kineType=trade`)">
                </div>
            </div>
        </div>
        <!-- 左侧边弹出菜单 -->
        <van-popup class="popup" round v-model="show" close-icon-position="top-left" position="left" @closed="onClose">
            <div class="pl-42 pr-40">
                <div class="flex justify-between mb-42 mt-53">
                    <div class="flex items-center text-grey">
                        <div class="mr-12">{{ $t('名称') }}</div>
                    </div>
                    <div class="flex text-grey">
                        <div class="flex items-center">
                            <div>{{ $t('最新价格') }}</div>
                        </div>
                        <div class="flex items-center">
                            <div class="mr-12">/24H{{ $t('涨跌') }}</div>
                        </div>
                    </div>
                </div>
                <div class="flex justify-between mb-50" v-for="item in list" :key="item.name" @click="onRoute(item)">
                    <div>
                        <div class="font-700 textColor">{{ item.name || '--' }}</div>
                        <div v-if="!kineType" class="text-grey mt-10">{{ title }}</div>
                    </div>
                    <div class="text-right">
                        <div class="textColor">{{ item.close || '--' }}</div>
                        <div class="mt-10" :class="item.change_ratio > 0 ? 'text-green' : 'text-red'">
                            {{ item.change_ratio || (item.change_ratio === 0 ? 0 : '--') }}%
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>
    
<script>
import { setStorage } from '@/utils/utis'
import { Popup } from "vant";
import { mapGetters } from "vuex";
import { _getHomeList, _collect, _deleteCollect, _checkIsInCollect } from "@/API/home.api";
import { THEME } from '@/config/theme'
export default {
    name: "contractHeader",
    props: {
        tabIndex: {
            type: String,
            default: null
        },
        backFunc: {
            type: Function,
            default: null
        },
        symbol: {
            type: String,
            default: ''
        },
        range: {
            type: String,
            defalult: ''
        },
        islevel: {
            type: Boolean,
            defalult: false
        },
        title: {
            type: String,
            defalult: '--'
        },
        isNight: {
            type: Boolean,
            defalult: false
        },
        isChange: {
            type: Boolean,
            defalult: false
        },
        isTrade: {
            type: Boolean,
            defalult: false
        },
        kineType: {
            type: String,
            defalult: ''
        },
    },
    components: {
        [Popup.name]: Popup,
    },
    computed: {
        ...mapGetters({ coinList: 'home/coinList' }),
    },
    data() {
        const arr = []
        for (let i = 0; i < 10; i++) {
            arr.push({ id: i })
        }
        return {
            THEME,
            //   selectIndex2:this.selectIndex,
            show: false,
            timeout: null,
            collected: '0',
            // title: '',
            list: arr, //[
            // { name:"BTC/USDT",close:"22042.28",change_ratio:"2.21"},
            // { name:"XTZ/USDT",close:"1.568",change_ratio:"-7.1"},
            // { name:"ADA/USDT",close:"0.493085",change_ratio:"-4.08"},
            //]
        }
    },
    watch: {
        symbol(val) {
            if (this.islevel) {
                this.$emit('changeLine', true)
            }
            if (this.islevel && this.$store.state.user.userInfo.token) {
                let symbol = this.$route.params.symbol;
                _checkIsInCollect(symbol).then(data => {
                    const { status } = data
                    this.collected = status
                })
            }
        }
    },
    created() {
        // this.coins = this.coinList.map(item => item.symbol)
        // console.log('this.coins', this.coins)
        if (this.islevel && this.$store.state.user.userInfo.token) {
            let symbol = this.$route.params.symbol;
            _checkIsInCollect(symbol).then(data => {
                const { status } = data
                this.collected = status
            })
        }
    },
    methods: {
        onRoute(item) {
            if (this.islevel) {
                if (this.$route.params.symbol !== item.symbol) {
                    this.$router.push(`/trendDetails/${item.symbol}`)
                    if (this.kineType) {
                        setStorage('tradeSymbol', item.symbol)
                    } else {
                        setStorage('symbol', item.symbol)
                    }
                    this.$emit('update-coin', item.symbol)
                    this.onClose()
                    this.$forceUpdate()
                }

            } else {
                if (this.$route.params.symbol !== item.symbol) {
                    this.$router.push(`/trade/${item.symbol}`)
                    setStorage('tradeSymbol', item.symbol)
                    this.$emit('update-coin', item.symbol)
                    this.$forceUpdate()
                }
            }
            this.show = false
        },
        onSidebar() { // 侧边栏打开
            console.log(this.userInfo)
            this.coins = this.coinList.map(item => item.symbol)
            this.show = true
            this.fetchList()
        },
        fetchList() { // 获取行情
            _getHomeList(this.coins.join(',')).then(list => {
                // console.log(list)
                this.list = list
                if (this.timeout) {
                    clearTimeout(this.timeout)
                    this.timeout = null
                }
                this.timeout = setTimeout(() => {
                    this.fetchList()
                }, 1000)
            })
        },
        onClose() {
            if (this.timeout) {
                clearTimeout(this.timeout)
                this.timeout = null
            }
        },
        jump() {
            this.$router.push(`/trendDetails/${this.symbol}`)
        },
        changeTab(index) {
            this.$emit('tab', index)
            // this.selectIndex2 = index;
        },
        goBack() {
            if (this.backFunc) {
                this.backFunc()
            } else {
                this.$router.go(-1);
            }
        },
        goRouter(params) {
            this.$router.push(params);
        },
        onCollect() { // 收藏，取消收藏
            let _api = _collect
            if (this.collected === '1') {
                _api = _deleteCollect
            }
            _api(this.symbol).then((res) => {
                if (this.$store.state.user.userInfo.token) {
                    this.collected = this.collected === '1' ? '0' : '1'
                    if (this.collected === '1') {
                        this.$toast.success(this.$t('收藏成功'))
                    } else {
                        this.$toast.success(this.$t('取消收藏'))
                    }
                }
            })
        },
        goHistory() {
            const url = ((this.tabIndex * 1) == 1) ? 'perpetualHistory' : 'deliveryContractHistory'
            this.$router.push({
                path: `/${url}?symbol=${this.symbol}`
            });
        },
        changeBg() {
            this.$emit('changeNight', !this.isNight)
        }

    },
}

</script>
    
<style lang="scss" scoped>
// .contract-header{
//     background-color:#F5F5F5;
// }

.wallet-background {
    background-color: #E8E8E8;
}

.select-active {
    background-color: white;
    color: black;
}

.no-select {
    background-color: #e8e8e8;
    color: #868D9A;
}

// 弹出层样式
.popup {
    height: 100%;
    width: 670px;
}

.night {
    color: #fff;
}</style>
    